{extend name="layout/layout"}
{block name="content"}
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.css"> -->
<link rel="stylesheet" href="__ROOT__/public/activity/css/index.css?at={:date('his')}">
<style>
    .layui-laydate .layui-this {
        background-color: #F97A28 !important;
        color: #fff !important;
    }
    .componentItem {
        height: 0.4rem;
        line-height: 0.4rem;
        background: #DDDDDD;
        border-radius: 2px;
        padding: 0 0.2rem;
        text-align: center;
        font-size: 0.12rem;
        cursor: pointer;
    }
    .layui-form .label {
        font-weight: bold;
        margin-bottom: 0.16rem;
    }
    .label_block .block1 {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.1rem;
    }
    .label_block{
display: none;
      }
      .lan_label_block .lan_item{
         display: none;
      }
      .lan_label_block .label_block{
         display: block;
      }
      .lan_label_block li{
         width: 100%;
         margin-bottom: 0.2rem;
      }
      .label_block .block1{
         display: flex;
        justify-content: space-between;
        margin-bottom: 0.1rem;
      }
      .dropdown,
      .label_block .block1 .btn_guanli{
         color: #F97A28;
      }
      
      .dropdown{
         cursor: pointer;
      }
      .text_block{
         width: 3rem;
      }
      .text_block .tb_t1{
         background-color: #ccc;
         padding: 0.05rem 0.2rem;
      }
      .text_block .tb_b1{
         padding: 0.1rem 0.2rem;
      }
      #diyForm .layui-form-item{
        border:1px solid #e6e6e6;
        border-radius: 5px;
        padding: 10px;
      }
</style>
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" data-load="user_active_header">
                    {include file="user_activity/page_menu" menu='diy' id="$id" /}
                </div>
                <div class="right_main ">
                    <p class="ft24 mb10 ft-bold">报名表</p>
                    <div class="block_com" style="min-height: 80vh;">
                        <div class="uaps_t1 ft14 ft-bold mb20"> 報名表資訊是提供給主辦單位安排活動之用，電子票券仍是寄到訂購人信箱，如消費者有疑慮，請引導消費者至<a
                              class="orange_c">「修改個人資料」</a> 修改信箱地址</div>
                        <ul class="layui-row layui-col-space20 ">
                           <li class="layui-col-md6 layui-col-xs12 uaps_ul1">
                              <div class="item">
                                 <p class="ft18 ft-bold mb20">您的報名表</p>
                                 <div class="b1 block__list block__list_words">
                                       <div class="lan_label_block"  style="height:auto">
                                            <form action="" style="padding-bottom: 50px;min-height:120px" class="layui-form d-flex flex-column" id="diyForm" ondrop="drop(event)" ondragover="allowDrop(event)">
                                                
                                                {if isset($diyform) && count($diyform)}
                                                    {volist name="diyform" id="vo"} 
                                                    <div class="layui-form-item">
                                                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                                                            <div data-type="{$vo.label_type}" class="diy_lab">{$vo.label}</div>
                                                            <div class="d-flex">
                                                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                                                            </div>
                                                        </div>
                                                        {if $vo.desc !=''}
                                                            <p class="tip1">{$vo.desc}</p>
                                                        {/if}
                                                        <div class="input_div" data-lable="{$vo.label}" data-options="{$vo.options|default=''}" data-must="{$vo.must}" data-type="{$vo.label_type}" data-tips="{$vo.tips|default=''}" data-desc="{$vo.desc|default=''}">
                                                            {if $vo.label_type == 'radio' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)} 
                                                                {volist name="$vo.options_arr" id="radio_option"} 
                                                                    <input type="radio" name="{$radio_option}" value="{$radio_option}" title="{$radio_option}">
                                                                {/volist} 
                                                            {elseif ($vo.label_type == 'checkbox' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)) /} 
                                                                {volist name="$vo.options_arr" id="checkbox_option"} 
                                                                    <input type="checkbox" name="{$checkbox_option}" value="{$checkbox_option}" title="{$checkbox_option}">
                                                                {/volist} 
                                                            {elseif ($vo.label_type == 'selects' && isset($vo.options_arr) && is_array($vo.options_arr) &&  count($vo.options_arr)) /} 
                                                                
                                                                <select  name="{$vo.label_type}" lay-verify="required">
                                                                    <option value=""></option>
                                                                    {volist name="$vo.options_arr" id="select_option"} 
                                                                        <option value="{$select_option}">{$select_option}</option>
                                                                        <option value="{$select_option}">{$select_option}</option>
                                                                        <option value="{$select_option}">{$select_option}</option>
                                                                    {/volist} 
                                                                 </select>
                                                            {elseif ($vo.label_type == 'textarea') /}
                                                                <textarea name="{$vo.label_type}" placeholder="{$vo.tips}" class="layui-textarea"></textarea>
                                                            {else /} 
                                                                 <input type="{$vo.label_type}" name="text" lay-verify="required" autocomplete="off" placeholder="{$vo.tips}" class="layui-input">
                                                            {/if}
                                                        </div>
                                                    </div> 
                                                    {/volist}
                                                {/if}
                                            </form>
                                       </div>
                                       <div class="item flex-column-center " style="padding-bottom: 1rem;">
                                            <div class="" style="width: 1rem;">
                                            <img src="__ROOT__/public/activity/images/move.png">
                                            </div>
                                            <p class="ft18 gary_c9 mt30">
                                            1.從右側拖拉您需要的欄位組件到這裡<br> 2.點選欄位進行編輯<br> 3.如要變更欄位順序，請自行拖拉
                                            </p>
                                       </div>
                                 </div>
                              </div>
                           </li>
                           <li class="layui-col-md6 layui-col-xs12 uaps_ul1">
                              <div class="item">
                                 <p class="ft18 ft-bold mb20">拖拉欄位組件</p>
                                 <div class="b1">
                                    <div class="layui-tab layui-tab-brief">
                                       <ul class="layui-tab-title">
                                          <li class="layui-this">自定义表格栏位</li>
                                          <li>常用栏位</li>
                                       </ul>
                                       <div class="layui-tab-content">
                                          <div class="layui-tab-item layui-show block__list block__list_words">
                                            <ul id="diy_draggableComponents" class="layui-row layui-col-space20 ">
                                                <li class="layui-col-md6 layui-col-xs12 ">
                                                    <div class="componentItem" draggable="true" data-label="文本" data-type="text" ondragstart="diy_drag(event)">文本</div>
                                                </li>
                                                <li class="layui-col-md6 layui-col-xs12 ">
                                                    <div class="componentItem" draggable="true" data-label="单选" data-type="radio" ondragstart="diy_drag(event)">单选</div>
                                                </li>
                                                <li class="layui-col-md6 layui-col-xs12 ">
                                                    <div class="componentItem" draggable="true" data-label="多选" data-type="checkbox" ondragstart="diy_drag(event)">多选</div>
                                                </li>
                                                <li class="layui-col-md6 layui-col-xs12 ">
                                                    <div class="componentItem" draggable="true" data-label="下拉选择" data-type="selects" ondragstart="diy_drag(event)">下拉选择</div>
                                                </li>
                                                
                                            </ul>
                                          </div>
                                          <div class="layui-tab-item  block__list block__list_words">
                                            <ul id="draggableComponents" class="layui-row layui-col-space20 ">
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                   <div class="componentItem" draggable="true" data-label="姓名" data-type="text" ondragstart="drag(event)">姓名输入框</div>
                                               </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                    <div class="componentItem" draggable="true" data-label="年龄" data-type="number" ondragstart="drag(event)">年龄输入框</div>
                                                </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                   <div class="componentItem" draggable="true" data-label="网站" data-type="url" ondragstart="drag(event)">密码输入框</div>
                                               </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                   <div class="componentItem" draggable="true" data-label="邮箱" data-type="email" ondragstart="drag(event)">邮箱输入框</div>
                                               </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                   <div class="componentItem" draggable="true" data-label="电话" data-type="phone" ondragstart="drag(event)">电话输入框</div>
                                               </li>
                                               <!-- <li class="layui-col-md6 layui-col-xs12 ">
                                                <div class="componentItem" draggable="true" data-label="日期" data-type="date" ondragstart="drag(event)">日期选择框</div>
                                               </li> -->
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                <div class="componentItem" draggable="true" data-label="身份证" data-type="identity" ondragstart="drag(event)">身份证输入框</div>
                                               </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                  <div class="componentItem" draggable="true" data-label="性别" data-type="sex" ondragstart="drag(event)">性别单选框</div>
                                               </li>
                                               <li class="layui-col-md6 layui-col-xs12 ">
                                                  <div class="componentItem" draggable="true" data-label="介绍描述" data-type="textarea" ondragstart="drag(event)">介绍描述输入框</div>
                                               </li>
                                               
                                            </ul>
                                         </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <div class="mt100 d-flex jc-s al-c">
                        <a href="/activity/create/group.html" class="last-btn">
                            <img src="__ROOT__/public/activity/images/out1.png">返回上一步
                        </a>
                        
                        <a href="javascript:;">
                            <button class="layui-btn layui-bg-orange next-btn submit_diy">儲存</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<form lay-filter="formDom" class="text_block uaps_ul1 layui-form dropdown-content" style="display: none;">
    <div class="tb_t1">文字区块</div>
    <div class="tb_b1">
       <div class="layui-form-item">
          <div class="label"><span class="ft12">标题</span>
          </div>
          <div>
             <input type="text" name="diy_title"  lay-verify="require" placeholder=""
                autocomplete="off" class="layui-input" value="">
          </div>
       </div>
       <div class="layui-form-item">
          <div class="label "><span class="ft12">说明</span>
          </div>
          <div>
             <input type="text" name="diy_desc"   placeholder="栏位说明"
                autocomplete="off" class="layui-input" value="">
          </div>
       </div>
       <div class="layui-form-item">
          <div class="label "><span class="ft12">提示</span>
          </div>
          <div>
             <input type="text" name="diy_tips"  placeholder="栏位提示"
                autocomplete="off" class="layui-input" value="">
          </div>
       </div>
       <div class="layui-form-item option_set">
            <div class="label "><span class="ft12">选项</span>
            </div>
            <div>
            <textarea type="text" name="diy_options"  placeholder="单选多选下拉必填 用|号分割 如‘男|女’"
                autocomplete="off" class="layui-textarea" value=""></textarea>
            </div>
        </div>
        <input type="hidden" name="diy_type">
       <div class="layui-form-item">
          <div class="label "><span class="ft12">是否必选</span>
          </div>
          <div>
            <input type="radio" name="diy_must" value="1" title="是">
            <input type="radio" name="diy_must" value="0" title="否">
          </div>
       </div>
    </div>
</form>
    <!-- 引入 layui 的 JavaScript 文件 -->
    <!-- <script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script> -->
    <script type="text/javascript" src="__ROOT__/public/activity/layui/layui.js"></script>
    <!-- 引入 Sortable.js 的 JavaScript 文件 -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script> -->
    <script src="__ROOT__/public/activity/js/Sortable.js"></script>
   
   <script>
    new Sortable(diyForm, {
        group: {
            name: 'diyFormGroup', // 设置组的名称
            pull: 'clone', // 允许拖动复制
            put: false // 禁止放置
        },
        handle: '.diy_lab', // 拖动操作的触发元素
        animation: 150, // 动画时长（毫秒）
        ghostClass: 'sortable-ghost', // 拖动时的样式
        chosenClass: 'sortable-chosen', // 选中时的样式
        dragClass: 'sortable-drag', // 拖动时的样式
        onEnd: function (evt) {
            // 拖动结束后更新表单项的顺序
            updateFormItemOrder();
        }
    });


    // 更新表单项的顺序
    function updateFormItemOrder() {
        // 获取所有的 layui-form-item 元素
        var formItems = $('#diyForm .layui-form-item .input_div');
        
        // 更新每个 layui-form-item 元素的索引值
        formItems.each(function (index, item) {
            $(item).attr('data-order', index + 1); // 更新 data-order 属性
        });
    }
    function allowDrop(ev) {
        ev.preventDefault();
    }
   
    function drag(ev) {
        ev.dataTransfer.setData("text", JSON.stringify({
            label: ev.target.dataset.label,
            type: ev.target.dataset.type,
            diy: 1, //1固定 2自定义
        }));
    }

    function diy_drag(ev){
        ev.dataTransfer.setData("text", JSON.stringify({
            label: ev.target.dataset.label,
            type: ev.target.dataset.type,
            diy: 2,
        }));
    }
   
    function drop(ev) {
        ev.preventDefault();
        var componentData = JSON.parse(ev.dataTransfer.getData("text"));
        var inputHtml = generateInputHtml(componentData.label, componentData.type,componentData.diy);
        var target = ev.target;

        ev.target.innerHTML += inputHtml;
      
   
        // 重新渲染 layui 表单组件
        layui.use(['form'], function() {
            var form = layui.form;
            form.render();
        });
    }

   
    // 根据组件类型生成对应的 HTML 代码
    function generateInputHtml(label, type,diy = 1) {
        var inputHtml = '';
        if(diy == 1){
            //固定
            if (type === 'text') {
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"   data-lable="${label}" data-must="1" data-type="${type}" data-tips="${label}请输入" data-desc="">
                            <input type="${type}" name="${type}" lay-verify="required" autocomplete="off" placeholder="${label}请输入" class="layui-input">
                        </div>
                    </div>`;
            } else if(  type === 'url' || type === 'email' || type === 'phone' || type === 'number'){
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"   data-lable="${label}" data-must="1" data-type="${type}" data-tips="${label}请输入" data-desc="">
                            <input type="${type}" name="${type}" lay-verify="required|${type}" autocomplete="off" placeholder="${label}请输入" class="layui-input">
                        </div>
                    </div>`;
            }else if(type == 'identity') {
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"  data-lable="${label}" data-must="1" data-type="${type}" data-tips="${label}请输入" data-desc="">
                            <input type="text" name="${type}" lay-verify="required|identity" autocomplete="off" placeholder="${label}请输入" class="layui-input">
                        </div>
                    </div>`;
            } else if(type == 'sex') {
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"  data-lable="${label}" data-must="1" data-type="radio" data-tips="" data-desc="" data-options="男|女">
                            <input type="radio" name="${type}" value="男" title="男"> 
                            <input type="radio"  name="${type}" value="女"  title="女">
                        </div>
                    </div>`;
            } else if(type == 'textarea') {
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"  data-lable="${label}" data-must="1" data-type="${type}" data-tips="请输入${label}" data-desc="" data-options="男|女">
                            <textarea name="${type}" placeholder="请输入${label}" class="layui-textarea"></textarea>
                        </div>
                    </div>`;
            }else if (type === 'date') {
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div class="input_div"  data-lable="${label}" data-must="1" data-type="${type}" data-tips="" data-desc="">
                            <input type="text" name="${type}" id="${type}" lay-verify="required" trigger="click" autocomplete="off" placeholder="${label}请选择" class="layui-input"  >
                        </div>
                    </div>`;
                    // 渲染日期选择框
                    layui.use('laydate', function(){
                        var laydate = layui.laydate;
                        laydate.render({
                            elem: '#' + type,
                            type: 'datetime',
                            trigger:'click'
                        });
                    });
                }
                return inputHtml;
        }else{
            //自定义组件
            if (type === 'text' || type === 'password' || type === 'email' || type === 'tel' || type === 'number') {
                 inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div  class="input_div" data-lable="${label}" data-must="1" data-type="${type}" data-tips="" data-desc="">
                            <input type="${type}" name="${type}" lay-verify="required" autocomplete="off" placeholder="${label}请输入" class="layui-input">
                        </div>
                    </div>`;
            } else if(type == 'radio'){
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div  class="input_div" data-lable="${label}" data-options="男|女" data-must="1" data-type="${type}" data-tips="" data-desc="">
                            <input type="radio" name="${type}" value="男" title="男">
                            <input type="radio" name="${type}" value="女" title="女">
                        </div>
                    </div>`;
            }else if(type == 'checkbox'){
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div  class="input_div" data-lable="${label}" data-options="写作|阅读" data-must="1" data-type="${type}" data-tips="" data-desc="">
                            <input type="checkbox" name="${type}" value="写作" title="写作">
                            <input type="checkbox" name="${type}" value="阅读" title="阅读">
                        </div>
                    </div>`;
            }else if(type == 'selects'){
                inputHtml = `
                    <div class="layui-form-item">
                        <div style="display:flex;justify-content: space-between;margin-bottom: 0.1rem;">
                            <div data-type="${label}" class="diy_lab">${label}</div>
                            <div class="d-flex">
                                <div class="dropdown id-dropown" style="color: #F97A28">管理</div>
                                <div class="deleteBtn" style="color: #F00; margin-left: 10px; cursor: pointer;">删除</div>
                            </div>
                        </div>
                        <div  class="input_div" data-lable="${label}" data-options="北京|上海|广州" data-must="1" data-type="${type}" data-tips="" data-desc="">
                            <select  name="${label}" lay-verify="required">
                                <option value=""></option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广州">广州</option>
                             </select>
                        </div>
                    </div>`;
            }else if (type == 'date') {
                inputHtml = '<div class="layui-form-item"><div class="label"><span class="ft12">' +label+ '</span></div><div><input type="text" name="' + type + '" id="' + type + '" lay-verify="required" trigger="click" autocomplete="off" placeholder="' + label + '请选择" class="layui-input"></div></div>';
                // 渲染日期选择框
                layui.use('laydate', function(){
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#' + type,
                        type: 'date',
                        trigger:'click'
                    });
                });
            }
            return inputHtml;
        }

    }
    $(document).on('click','.deleteBtn',function(){
        $(this).parents('.layui-form-item').remove();
    })
    $(document).on('click','.submit_diy',function(){
        // 获取所有的 input_div 元素
            var inputDivs = document.querySelectorAll('.input_div');

            // 定义一个数组，用于存放每个 input_div 元素的属性值
            var formData = [];

            // 遍历每个 input_div 元素
            inputDivs.forEach(function(inputDiv) {
                // 获取 input_div 元素的自定义属性值
                var label    = inputDiv.getAttribute('data-lable') || '';
                var must     = inputDiv.getAttribute('data-must') || '';
                var type     = inputDiv.getAttribute('data-type') || '';
                var tips     = inputDiv.getAttribute('data-tips') || '';
                var desc     = inputDiv.getAttribute('data-desc') || '';
                var options  = inputDiv.getAttribute('data-options') || '';

                // 构造一个对象，包含 input_div 的属性值
                var inputData = {
                    label: label,
                    must: must,
                    type: type,
                    tips: tips,
                    desc: desc,
                    options:options
                };
               
                // 将对象添加到 formData 数组中
                formData.push(inputData);
            });

            // 将 formData 数组转换为 JSON 字符串
            var jsonData = JSON.stringify(formData);
            $.quickPost('/activity/user/activity/{$id}/diy', {diy:jsonData}).done((res) => {
  
                location.reload();
            })
     

    })
    $(document).on('click','.dropdown',function(){
        var that = $(this);
        layui.use(['form','layer'], function() {
        var dropdown = layui.dropdown;
        var form = layui.form;
        var layer = layui.layer;
        var inputDiv = that.parents('.layui-form-item').children('.input_div');
        // 获取自定义属性值
        var label = inputDiv.attr('data-lable') || '';
        var must = inputDiv.attr('data-must');
        var type = inputDiv.attr('data-type');
        var tips = inputDiv.attr('data-tips') || '';
        var desc = inputDiv.attr('data-desc') || '';
        var options = inputDiv.attr('data-options') || '';   
        layer.open({
            type: 1, 
            title:false,
            fixed:true,
            closeBtn:false,
            shadeClose:true,
            resize:false,
            content: $('.dropdown-content'),
            success:function(){
                if(type !='radio' && type !='checkbox' && type !='selects' && type !='sex'){
                    $('.dropdown-content .option_set').hide()
                }else{
                    $('.dropdown-content .option_set').show()
                }
              
                form.val("formDom",{
                    'diy_title' : label,
                    'diy_desc'  : desc,
                    'diy_tips'  : tips,
                    'diy_must'  : must,
                    'diy_type'  : type,
                    'diy_options' : options
                });
                form.render();
            },
            end:function(){
                var data1 = form.val("formDom");
       
                if(data1.diy_title == '') return layer.msg('标题不得为空')
                type = data1.diy_type || ''
                options = data1.diy_options || ''
                desc = data1.diy_desc || ''
                if(type == 'radio'){
                    //单选
                    if (!options || (typeof options === 'string' && options.trim() === '') || (Array.isArray(options) && options.length === 0)) {
                        return layer.msg('选项值格式不正确');
                    }
                    // 使用 | 分割字符串为数组
                    var options_arr = options.split('|');
                    // 创建一个空字符串，用于存放生成的 <input> 元素
                    var inputs = '';
                        // 遍历数组，生成 <input> 元素
                    for (var i = 0; i < options_arr.length; i++) {
                        var value = options_arr[i];
                        // 创建 <input> 元素，并将其添加到字符串中
                        inputs += '<input type="radio" name="'+value+'" value="' + value + '" title="' + value + '"> ';
                    }
                    inputDiv.empty().append(inputs)
                    inputDiv.attr('data-options',options)
                }
                if(type == 'checkbox'){
                    //多选
                    if (!options || (typeof options === 'string' && options.trim() === '') || (Array.isArray(options) && options.length === 0)) {
                        return layer.msg('选项值格式不正确');
                    }
                    // 使用 | 分割字符串为数组
                    var options_arr = options.split('|');
                    // 创建一个空字符串，用于存放生成的 <input> 元素
                    var inputs = '';
                        // 遍历数组，生成 <input> 元素
                    for (var i = 0; i < options_arr.length; i++) {
                        var value = options_arr[i];
                        // 创建 <input> 元素，并将其添加到字符串中
                        inputs += '<input type="checkbox" name="'+value+'" value="' + value + '" title="' + value + '"> ';
                    }
                    inputDiv.empty().append(inputs)
                    inputDiv.attr('data-options',options)
                }
                if (type == 'selects') {
                        // 下拉框
                        if (!options || (typeof options === 'string' && options.trim() === '') || (Array.isArray(options) && options.length === 0)) {
                            return layer.msg('选项值格式不正确');
                        }
                        
                        // 使用 | 分割字符串为数组
                        var options_arr = options.split('|');
                        
                        // 创建一个空字符串，用于存放生成的 <option> 元素
                        var optionsHtml = '';
                        
                        // 遍历数组，生成 <option> 元素
                        for (var i = 0; i < options_arr.length; i++) {
                            var value = options_arr[i];
                            // 创建 <option> 元素，并将其添加到字符串中
                            optionsHtml += '<option value="' + value + '">' + value + '</option>';
                        }
                        
                        // 创建 <select> 元素，并将生成的 <option> 元素添加到其中
                        var selectHtml = '<select name="select">' + optionsHtml + '</select>';
                        
                        // 将生成的 <select> 元素添加到 inputDiv 中
                        inputDiv.empty().append(selectHtml);
                        inputDiv.attr('data-options', options);
                    }
                    
                that.parents('.d-flex').siblings('.diy_lab').text(data1.diy_title || '');
                that.parents('.layui-form-item').children('.input_div').children('.layui-input').attr('placeholder', data1.diy_tips || '');
                that.parents('.layui-form-item').children('.input_div').attr('data-lable', data1.diy_title || '')
                .attr('data-desc', data1.diy_desc || '')
                .attr('data-tips', data1.diy_tips || '')
                .attr('data-must', parseInt(data1.diy_must) );
                if(desc !=''){
                    that.parents('.layui-form-item').children('.tip1').remove();
                    var pElement = $('<p class="tip1">').text(desc);
                    inputDiv.before(pElement);
                }
                // form.val("formDom",{diy_title:"",diy_tips:"",diy_must:0,diy_desc:""});
                form.render();
            }
            
        });
        form.render();
    });
   $(document).on('change','[data-value]',function(){

   $block = $(document).find('.label_block.layui-this');
      var val = $(this).attr('data-value')
      var $changeBlock =  $block.find('[data-valueb='+ val+']')
         if(val == 'title'){

            $changeBlock.text($(this).val())
         }
      })
});
   </script>

{/block}
